<template>
  <div class="container">
    <a-card style="width: 100%">
      <div class="filter">
        <div class="form">
          <a-form layout="inline">
            <a-form-item label="试卷名">
              <a-input
                v-model:value="searchValue"
                placeholder="请输入试卷名"
                style="width: 240px"
              ></a-input>
            </a-form-item>
          </a-form>
        </div>
        <div class="action-btns">
          <a-space>
            <a-button type="primary" @click="getExamPaperList">查询</a-button>
            <a-button v-permission="['管理者', '老师']" @click="openAddModal()">新增</a-button>
          </a-space>
        </div>
      </div>
    </a-card>
    <div class="content">
      <a-card title="班级" style="width: 400px">
        <a-table :dataSource="categoryData" :columns="categoryColumns"
                 :rowClassName="(record: any, index: any) => getGroupRowClassName(record)" :pagination="false"
                 :customRow="customRow">
        </a-table>
      </a-card>
      <a-card :title="cardTitleName" style="width: calc(100% - 416px)">
        <a-table
          :dataSource="examPaperList"
          :columns="columns"
          :pagination="{ onChange: handlePageChange, total: pageInfo.total }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'name'">
              <a-button type="link" @click="openExamPaperDetail(record)">{{ record.name }}</a-button>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button
                  v-permission="['管理者', '老师']"
                  type="link"
                  @click="openAddModal(record)"
                  >编辑</a-button
                >
                <a-button v-permission="['管理者', '老师']" type="link" @click="openResultModal(record.id)"
                  >查看学生考试成绩</a-button
                >

                <a-popconfirm
                  title="确定删除吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="del(record.id)"
                >
                  <a-button v-permission="['管理者', '老师']" type="link" danger>删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
    <!-- 弹窗 -->
    <Add ref="addModal" @refresh="getExamPaperList"></Add>
    <Result ref="resultModal" :category-list="categoryData"> </Result>
    <Detail ref="detailModal"></Detail>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import Add from './components/add.vue'
import Result from './components/result.vue'
import Detail from './components/detail.vue'
import { fetchExamPaperList, fetchExamPaperDel } from '@/api/examPaper'
import { fetchCategoryList } from '@/api/student'
import { message } from 'ant-design-vue'

const searchValue = ref('')

const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
onMounted(() => {
  getCategoryList()
  getExamPaperList()
})
const getExamPaperList = async () => {
  const params = {
    page_num: pageInfo.value.page,
    conditions: [
      {
        key: 'name',
        operator: 'like',
        value: searchValue.value
      },
      {
        key: 'categorys',
        operator: 'like',
        value: examSearch.value.category_id
      }
    ],
    page_size: pageInfo.value.pageSize,
    order_info: {
      key: 'create_time',
      order: 'desc'
    }
  }
  const res = await fetchExamPaperList(params)
  examPaperList.value = res.data.data
  pageInfo.value.total = res.data.paging.total
}
const examSearch = ref({
  category_id: ''
})
const examPaperList = ref<any[]>([])
const columns = [
  {
    title: '序号',
    align: 'center',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '试卷名',
    align: 'center',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '分类',
    align: 'center',
    dataIndex: 'category_list',
    key: 'category_list',
    customRender: (params: any) => {
      return params.record.category_list.length ? params.record.category_list.join(',') : '所有'
    }
  },
  {
    title: '植物区域',
    align: 'center',
    dataIndex: 'area_list',
    key: 'area_list',
    customRender: (params: any) => {
      return params.record.area_list.length ? params.record.area_list.join(',') : '所有'
    }
  },
  {
    title: '操作',
    align: 'center',
    width: '160px',
    dataIndex: 'action',
    key: 'action'
  }
]

const handlePageChange = (page: number, pageSize: number) => {
  pageInfo.value.page = page
  pageInfo.value.pageSize = pageSize
  getExamPaperList()
}

// 删除
const del = async (id: number) => {
  const res = await fetchExamPaperDel(id)
  if (res.data.code === '200') {
    message.success('删除成功')
    await getExamPaperList()
  } else {
    message.error(res.data.message)
  }
}
// 编辑
const addModal = ref()
const openAddModal = (record?: any) => {
  addModal.value.openModal(record)
}
// 查看考生成绩
const resultModal = ref()
const openResultModal = (id: number) => {
  resultModal.value.openModal(id)
}

/**
 * 查看试卷试题弹窗
 */
const detailModal = ref()
const openExamPaperDetail = (record: any) => {
  detailModal.value.openModal(record)
}

/**
 * 左侧班级数据
 */
 const categoryData = ref<any[]>([])
const categoryColumns = [
  {
    title: '班级名',
    dataIndex: 'category_name',
    align: 'center',
    key: 'category_name'
  },
  {
    title: '操作',
    width: '156px',
    align: 'center',
    dataIndex: 'action',
    key: 'action'
  }
]
const cardTitleName = computed(() => {
  const filterList = categoryData.value.filter((item: any) => item.id === examSearch.value.category_id)
  if (filterList && filterList.length) return filterList[0].category_name
  return '全部'
})
const getCategoryList = async () => {
  const res = await fetchCategoryList({})
  categoryData.value = res.data.data.data
}
const getGroupRowClassName = computed(() => {
  return (record: any) => {
    if (examSearch.value.category_id === record.id) return 'normal-row active'
    return 'normal-row'
  }
})
const customRow = (record: any) => {
  return {
    onClick: () => {
      examSearch.value.category_id = record.id
      getExamPaperList()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .filter {
    display: flex;
    justify-content: space-between;
  }

  .content {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;

    :deep(.ant-card-head-title) {
      font-weight: bold;
    }
  }
}
:deep(.normal-row){
  cursor: pointer;
  &.active {
    background-color: #fafafa;
  }
}
</style>
